<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
      #box{
      	width: 600px;
      	height: 400px;
      	margin:0 auto;
      	border: 1px solid #ccc;
      }
      .sbox{
      	width:150px;
      	height: 150px;
        background: #666;
        margin: 0 auto;
      	}      }
	</style>
</head>
<body>
	<div id="box">
		<input type="button" value = "变宽">
		<input type="button" value = "变高">
		<input type="button" value = "变色">
		<input type="button" value = "隐藏">
		<input type="button" value = "重置">
		<div class="sbox" id="ff">
			
		</div>
	</div>
</body>
<script type="text/javascript">
	var changestyle = function (elem, attr,val){
		elem.style[attr] = val;
	}
	window.onload = function () {
		var Oinput = document.getElementsByTagName("input");
		var Odiv = document.getElementById("ff");
		var attr = ["width","height","backgroundColor","display","display"];
		var val = ["300px","300px","#f65","none","block"];
		for (var i = 0; i< Oinput.length; i++) {
			Oinput[i].index  = i;
			Oinput[i].onclick = function () {
				if (this.index == Oinput.length-1){
					Odiv.style.cssText = "";
				}
				changestyle(Odiv,attr[this.index],val[this.index]);
			}
		};
	}
</script>
</html>